<template>
  <div class="app-container">
      欢迎
  </div>
</template>

<script>
  import { fetchList, changeStatus } from '@/api/article';
  import ClipboardJS from 'clipboard';
  import Pagination from '@/components/Pagination'; // Secondary package based on el-pagination
  export default {
    components: { Pagination },
    filters: {
      statusFilter(status) {
        const statusMap = {
          published: 'success',
          draft: 'info',
          deleted: 'danger'
        };
        return statusMap[status];
      }
    },
    data() {
      return {
        list: null,
        total: 0,
        listLoading: true,
        listQuery: {
          name: '',
          status: '',
          pageSize: 10,
          pageNo: 1
        },
        calendarTypeOptions: [
          { key: '2', display_name: '进行中' },
          { key: '1', display_name: '未开启' },
          { key: '3', display_name: '结束' }
        ]
      };
    },
    created() {
      this.getList();
    },
    methods: {
      getList() {
        this.listLoading = true;
        var indexs = '0';
        fetchList(this.listQuery).then(response => {
          this.list = response.data.data.result;
          this.total = response.data.data.totalCount;
          this.listLoading = false;
          this.list.map((value, index) => {
            ++indexs;
            value['value'] = indexs;
            value['urls'] =
              'http://main.zlsoft.net.cn/h5/index.html?meetId=' +
              value.id;
          });
        });
        new ClipboardJS('.btn');
      },
      handleSizeChange(val) {
        this.listQuery.limit = val;
        this.getList();
      },
      handleCurrentChange(val) {
        this.listQuery.page = val;
        this.getList();
      },
      onchange(index, value) {
        var data = {
          meetId: value.id,
          type: value.status
        };
        changeStatus(data).then(res => {
          if (res.data.code == 1) {
            this.getList();
            this.$message({
              message: '开启成功',
              type: 'success'
            });
          }
        });
      },
      huiyilianjie() {
        this.$message({
          message: '复制成功',
          type: 'success'
        });
      }
    }
  };
</script>

<style scoped>
  .edit-input {
    padding-right: 100px;
  }
  .cancel-btn {
    position: absolute;
    right: 15px;
    top: 10px;
  }
</style>
